<div class="title">Beneath Hermit's Nest</div><!--
--><div class="menu-options">
<!-- Set Sail Option (Navigates to Passage "Set Sail") -->
<div class="eldritch-textbox" onclick="SugarCube.Engine.play('Set Sail');">
<p><strong>Set Sail</strong></p>
</div><!--
-->
<div class="eldritch-textbox modal-trigger" data-modal="modalGameInfo">
<p><strong>Game Information</strong></p>
</div><!--
-->
<div class="eldritch-textbox modal-trigger" data-modal="modalHowToPlay">
<p><strong>How to Play</strong></p>
</div>
</div>
<<script>>
/* Define global modal functions using the window object */
window.openModal = function(id) {
var modal = document.getElementById(id);
if(modal){
modal.style.display = "flex";
} else {
console.error("Modal with ID '" + id + "' not found.");
}
};
window.closeModal = function(id) {
var modal = document.getElementById(id);
if(modal){
modal.style.display = "none";
} else {
console.error("Modal with ID '" + id + "' not found.");
}
};
/* Attach click event to modal triggers in this passage */
$(document).ready(function(){
$('.eldritch-textbox[data-modal]').off('click').on('click', function(){
var modalId = $(this).attr("data-modal");
if(modalId) {
window.openModal(modalId);
}
});
/* Attach event to close the modal when clicking outside modal-content */
$('.modal').off('click').on('click', function(event){
if($(event.target).hasClass("modal")){
$(this).fadeOut(200, function(){
$(this).css("display", "none");
});
}
});
});
<</script>><div class="passage rpg">
<!-- RPG Image -->
<img src="your-image-url.jpg" alt="RPG Image">
<!-- Clickable Textboxes -->
<div class="rpg-links">
<div class="rpg-textbox" onclick="SugarCube.Engine.play('Option1Passage');">
<p>Option 1</p>
</div>
<div class="rpg-textbox" onclick="SugarCube.Engine.play('Option2Passage');">
<p>Option 2</p>
</div>
<div class="rpg-textbox" onclick="SugarCube.Engine.play('Option3Passage');">
<p>Option 3</p>
</div>
</div>
</div><p id="typewriterText" class="typewriter-textgreen">
"Ah, Gloomtow, a wretched town. Still stinks of fish, sewage, and ale. Not exactly a place for a holiday...
But of course, I didn't come for the scenery. No, I have business to attend to...
<span class="clickable-text" data-target="#typewriterText" data-replace="You peer out of the carriage window, but the view is bleak, a fog hanging over the town.">Look outside the window</span></p>
<<set $useVideo = true>>
<<set $videoSource to "https://lukerative.neocities.org/Beneath%20Hermits%20Nest/Videos/Carraige%20to%20Gloomtow.mov">>